import './style.scss';
import {useEffect} from 'react';
import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
const Account = ()=>{
    const location = useLocation();
    const navigate = useNavigate();
    const isLoginActivated = location.pathname === '/account/login';
    const loginActiveClass = isLoginActivated ? 'tab-item-active' : '';
    const registerActiveClass = !isLoginActivated ? 'tab-item-active' : '';
    /* 
     * 处理携带后端种的token后，路由跳转问题
     * 如果已经登陆，自动跳转到商城首页 
     */
    useEffect(()=>{
        if(localStorage.getItem('token')){
            navigate('/home')
        }
    }, [navigate])
    /**
     * 实际上嵌套路由：
     * 点登陆不是说进入一个新页面，而是点登陆的时候，把登陆要展示的内容显示/注入到登陆的下方
     * 点注册的时候，注册的内容展示/注入到注册标题的下方
     * 通用的东西一直保留在标题位置，点不同标题的时候底部灌入不同的内容
     */
    return (
        <div className='page account-page'>
            <div className="tab">
                <div className={`tab-item tab-item-left ${loginActiveClass}`}>
                    <Link to='/account/login'>登陆</Link>
                </div>
                <div className={`tab-item tab-item-right ${registerActiveClass}`}>
                    <Link to='/account/register'>注册</Link>
                </div>
                {/* 登陆的时候想把内容灌入，在Outlet展示,outlet有点像占位符的意思：展示什么内容不确定，你注入什么我展示什么 */}
            </div>
            <Outlet></Outlet>
        </div>
    )
}
export default Account